// 颜色变量系统
// 根据项目中提取的颜色值创建统一的颜色变量

// ===== 主题色 =====
// $primary-color: #e93323;           // 主题红色 - 按钮、链接、强调色
$primary-color: #8B5A2B;
$primary-color-bright: #D2B48C;
// $primary-hover: #d12b1f;           // 主题色悬停态
$primary-hover: #6D4A2A;
$primary-light: #fab6b6;           // 主题色浅色版本
$primary-disabled: #fab6b6;        // 主题色禁用态

// ===== 文本颜色 =====
$text-color: #212529;              // 基础文本颜色
$text-primary: #282828;            // 主要文本颜色
$text-secondary: #333333;          // 次要文本颜色
$text-tertiary: #4b4b4b;           // 第三级文本颜色
$text-muted: #5a5a5a;              // 静音文本颜色
$text-light: #666666;              // 浅色文本
$text-lighter: #707070;            // 更浅的文本
$text-placeholder: #727272;        // 占位符文本
$text-disabled: #868686;           // 禁用文本
$text-hint: #888888;               // 提示文本
$text-gray: #939393;               // 灰色文本
$text-light-gray: #969696;         // 浅灰色文本
$text-medium-gray: #999999;        // 中等灰色文本
$text-border-gray: #9B9B9B;        // 边框灰色
$text-very-light: #f8f9fa;         // 非常浅的文本
$text-input-placeholder: #CCCCCC;  // 输入框占位符
$text-white:#ffffff;

// ===== 背景颜色 =====
$bg-white: #ffffff;                // 白色背景
$bg-light-gray: #f2f2f2;           // 浅灰色背景
$bg-very-light: #f7f7f7;           // 非常浅的背景
$bg-body: #F9F9F9;                 // 页面主体背景
$bg-input: #f7f7f7;                // 输入框背景
$bg-disabled: #ededed;             // 禁用背景
$bg-dark: #212529;                 // 深色背景
$bg-black-overlay: rgba(0, 0, 0, 0.3); // 黑色遮罩
$bg-black-light: rgba(0, 0, 0, 0.25);  // 浅黑色遮罩
$bg-white-overlay: rgba(255, 255, 255, 0.24); // 白色遮罩

// ===== 边框颜色 =====
$border-light: #c0c4cc;            // 浅色边框
$border-medium: #cccccc;           // 中等边框
$border-gray: #d0d0d0;             // 灰色边框
$border-light-gray: #d3d3d3;       // 浅灰色边框
$border-separator: #d9d9d9;        // 分隔线边框
$border-very-light: #e3e3e3;       // 非常浅的边框
$border-lightest: #efefef;         // 最浅的边框
$border-form: #ebeef5;             // 表单边框
$border-tab: #ECECEC;              // 标签页边框
$border-divider: #e6e6e6;          // 分割线

// ===== VIP 相关颜色 =====
$vip-gradient-start: #fdcaa4;      // VIP渐变起始色
$vip-gradient-end: #fce3c3;        // VIP渐变结束色
$vip-text: #0f0f0f;                // VIP文本颜色
$vip-coupon: #fdd7b4;              // VIP优惠券颜色

// ===== 状态颜色 =====
$success-color: #67c23a;           // 成功色
$warning-color: #e6a23c;           // 警告色
$danger-color: #f56c6c;            // 危险色
$info-color: #909399;              // 信息色

// ===== 评分/星级颜色 =====
$star-active: #E93323;             // 激活的星星颜色
$star-inactive: #e6e6e6;           // 未激活的星星颜色

// ===== 透明度变体 =====
$transparent: transparent;          // 透明

// ===== 辅助函数 =====
// 创建带透明度的颜色
@function alpha-color($color, $alpha) {
  @return rgba($color, $alpha);
}

// 创建颜色的浅色版本
@function lighten-color($color, $amount: 10%) {
  @return lighten($color, $amount);
}

// 创建颜色的深色版本
@function darken-color($color, $amount: 10%) {
  @return darken($color, $amount);
}

// ===== 颜色映射 =====
$colors: (
  'primary': $primary-color,
  'success': $success-color,
  'warning': $warning-color,
  'danger': $danger-color,
  'info': $info-color,
  'white': $bg-white,
  'black': $bg-dark
);

// ===== 文本颜色映射 =====
$text-colors: (
  'primary': $text-primary,
  'secondary': $text-secondary,
  'muted': $text-muted,
  'light': $text-light,
  'white': $bg-white
);

// ===== 背景颜色映射 =====
$bg-colors: (
  'white': $bg-white,
  'light': $bg-light-gray,
  'body': $bg-body,
  'dark': $bg-dark,
  'primary': $primary-color
);

// ===== 字体系统 =====
// 现代无衬线字体栈
$font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
$font-family-chinese: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
$font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

// 字体大小
$font-size-xs: 12px;
$font-size-sm: 13px;
$font-size-base: 14px;
$font-size-md: 16px;
$font-size-lg: 18px;
$font-size-xl: 20px;
$font-size-2xl: 24px;
$font-size-3xl: 30px;

// 字重
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;

// 行高
$line-height-tight: 1.25;
$line-height-normal: 1.5;
$line-height-relaxed: 1.75;

// ===== CSS自定义属性 =====
:root {
  /* ===== 主题色 ===== */
  --primary-color: #E93323;           /* 主题红色 - 按钮、链接、强调色 */
  --primary-hover: #d12b1f;           /* 主题色悬停态 */
  --primary-light: #fab6b6;           /* 主题色浅色版本 */
  --primary-disabled: #fab6b6;        /* 主题色禁用态 */

  /* ===== 文本颜色 ===== */
  --text-primary: #282828;            /* 主要文本颜色 */
  --text-secondary: #333333;          /* 次要文本颜色 */
  --text-tertiary: #4b4b4b;           /* 第三级文本颜色 */
  --text-muted: #5a5a5a;              /* 静音文本颜色 */
  --text-light: #666666;              /* 浅色文本 */
  --text-lighter: #707070;            /* 更浅的文本 */
  --text-placeholder: #727272;        /* 占位符文本 */
  --text-disabled: #868686;           /* 禁用文本 */
  --text-hint: #888888;               /* 提示文本 */
  --text-gray: #939393;               /* 灰色文本 */
  --text-light-gray: #969696;         /* 浅灰色文本 */
  --text-medium-gray: #999999;        /* 中等灰色文本 */
  --text-border-gray: #9B9B9B;        /* 边框灰色 */
  --text-very-light: #f8f9fa;         /* 非常浅的文本 */
  --text-input-placeholder: #CCCCCC;  /* 输入框占位符 */
  --text-white:#ffffff;

  /* ===== 背景颜色 ===== */
  --bg-white: #ffffff;                /* 白色背景 */
  --bg-light-gray: #f2f2f2;           /* 浅灰色背景 */
  --bg-very-light: #f7f7f7;           /* 非常浅的背景 */
  --bg-body: #F9F9F9;                 /* 页面主体背景 */
  --bg-input: #f7f7f7;                /* 输入框背景 */
  --bg-disabled: #ededed;             /* 禁用背景 */
  --bg-dark: #222222;                 /* 深色背景 */
  --bg-black-overlay: rgba(0, 0, 0, 0.3); /* 黑色遮罩 */
  --bg-black-light: rgba(0, 0, 0, 0.25);  /* 浅黑色遮罩 */
  --bg-white-overlay: rgba(255, 255, 255, 0.24); /* 白色遮罩 */

  /* ===== 边框颜色 ===== */
  --border-light: #c0c4cc;            /* 浅色边框 */
  --border-medium: #cccccc;           /* 中等边框 */
  --border-gray: #d0d0d0;             /* 灰色边框 */
  --border-light-gray: #d3d3d3;       /* 浅灰色边框 */
  --border-separator: #d9d9d9;        /* 分隔线边框 */
  --border-very-light: #e3e3e3;       /* 非常浅的边框 */
  --border-lightest: #efefef;         /* 最浅的边框 */
  --border-form: #ebeef5;             /* 表单边框 */
  --border-tab: #ECECEC;              /* 标签页边框 */
  --border-divider: #e6e6e6;          /* 分割线 */

  /* ===== VIP 相关颜色 ===== */
  --vip-gradient-start: #fdcaa4;      /* VIP渐变起始色 */
  --vip-gradient-end: #fce3c3;        /* VIP渐变结束色 */
  --vip-text: #0f0f0f;                /* VIP文本颜色 */
  --vip-coupon: #fdd7b4;              /* VIP优惠券颜色 */

  /* ===== 状态颜色 ===== */
  --success-color: #67c23a;           /* 成功色 */
  --warning-color: #e6a23c;           /* 警告色 */
  --danger-color: #f56c6c;            /* 危险色 */
  --info-color: #909399;              /* 信息色 */

  /* ===== 评分/星级颜色 ===== */
  --star-active: #E93323;             /* 激活的星星颜色 */
  --star-inactive: #e6e6e6;           /* 未激活的星星颜色 */

  /* ===== 透明度变体 ===== */
  --transparent: transparent;         /* 透明 */

  /* ===== 字体系统 ===== */
  /* 现代无衬线字体栈 */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-family-chinese: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
  --font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

  /* 字体大小 */
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;

  /* 字重 */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* 行高 */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
}